{% extends "base.html" %}

<body>
{% block category %}
    <div class="subnav navbar-static-top ">
        <div class="navbar">
            <div class="navbar-inner">
                <div class="container">
                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <li class="active">
                                <a name="category" href="javascript:void(0);" id="allCate">ALL</a>
                            </li>
                            <li class="divider-vertical"></li>
                            {% for category in categorys %}
                                <li><a name="category" href="javascript:void(0);">{{ category.name }}</a></li>
                                <li class="divider-vertical"></li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block detail %}
    <div class="container">
        <div class="row">
            <!-- Sidebar -->
            <div class="span3">
                <div class="well box">
                    <div class="box-head">
                        User:{{ users.username }}
                    </div>
                    <div class="box-body">
                        <ul class="media-list">
                            <li class="media">
                                <div class="media-body">
                                    <a href="#">follow:{{ users.userprofile.follow }}</a>
                                </div>
                            </li>
                            <li class="media">
                                <div class="media-body">
                                    <a href="#">follower:{{ users.userprofile.followers }}</a>
                                </div>
                            </li>
                            <li class="media">
                                <div class="media-body">
                                    <a href="#">articleCount:{{ artCount }}</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- Body -->
            <div class="span9">
                <!-- Sort -->
                <ul class="nav nav-pills font-middle hide">
                    <li class="active">
                        <a href="#"><i class="icon-time"></i>Newest</a>
                    </li>
                    <li>
                        <a href="#"><i class="icon-upload"></i>Popular</a>
                    </li>
                    <li>
                    </li>
                </ul>
                <div class="clearfix"></div>
                <!-- PinBoard -->
                <ul class="media-list pinboard " id="tiles">

                </ul>
            </div>

        </div>

        <!-- Push -->
        <div id="push"></div>
    </div>
{% endblock %}

</body>
{% block js %}
    <script src="/js/jquery.masonry.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var flag = true;
        /**
         * When scrolled all the way to the bottom, add more tiles.
         */
        function onScroll(event) {
            // Check if we're within 100 pixels of the bottom edge of the broser window.
            var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
            if (closeToBottom && flag) {
                flag = false;
                // Get the first then items from the grid, clone them, and add them to the bottom of the grid.
                var items = $('#tiles li');
                if (items.length < 500) {
                    var category = '';
                    $("a[name=category]").each(function (i) {
                        if ($(this).hasClass('change')) {
                            category = $(this).html();
                        }
                    });
                    $.ajax({
                        type: "get",
                        url: "/article/personalAjax/" + {{ users.id }} +"/",
                        data: { no: items.length, category: category},
                        dataType: "html",
                        success: function (data) {
                            if (data) {
                                flag = true;
                            }
                            var boxdata = $(data);
                            $('#tiles').append(data).masonry('reload');
                        }
                    });
                }
            }
        }
        $(function () {
            $(document).bind('scroll', onScroll);
            var $container = $('#tiles');
            $container.imagesLoaded(function () {
                $container.masonry({
                    itemSelector: 'li',
                    isAnimated: true,
                    gutterWidth: 10
                });
            });
            $("a[name=category]").click(function () {
                        $("a[name=category]").each(function (i) {
                            $(this).parent('li').removeClass();
                        });
                        $(this).parent('li').addClass("active");
                        var category = $(this).html();
                        $.ajax({
                            type: "get",
                            url: "/article/personalAjax/" + {{ users.id }} +"/",
                            data: { no: 0, category: category},
                            dataType: "html",
                            success: function (data) {
                                if (data) {
                                    flag = true;
                                }
                                var boxdata = $(data);
                                $('#tiles').empty();
                                $('#tiles').append(data).masonry('reload');
                            }
                        });
                    }
            );
            $("#allCate").click();
        });
        function upvote(id) {
            $.ajax({
                type: "get",
                url: "/upvote/" + id,
                dataType: "html",
                success: function (data) {
                    alert(data);
                }
            });
        }
        function downvote(id) {
            $.ajax({
                type: "get",
                url: "/downvote/" + id,
                dataType: "html",
                success: function (data) {
                    alert(data);
                }
            });
        }
    </script>
{% endblock %}

</html>